import React from 'react'
import { connect } from 'react-redux'
import { ImportStyle } from 'sp-css-import'
import { pageinfo } from 'super-project'
import Sizing from '@ui/layout/sizing'
// import DatePicker from 'react-date-picker'
// import DateRangePicker from 'react-daterange-picker'
// import DatePicker from 'react-datepicker';
// import moment from 'moment';

// import 'react-datepicker/dist/react-datepicker.css';


@connect()
@pageinfo((state/*, renderProps*/) => ({
    title: '发货管理',
    // metas: [
    //     { 'description': 'Super Project' },
    //     { 'super-locale-id': state.localeId },
    // ]
}))
@ImportStyle(require('./index.less'))
export default class extends React.Component {
    render() {
        return (

            <Sizing>
                <div className={this.props.className}>

                    <div className="filter-box-wapper clearfix">
                        <div className="filter-box">
                            <form class="pure-form pure-form-stacked">
                                <fieldset>
                                    <div class="pure-g">
                                        <div class="pure-u-1 pure-u-md-1-3">
                                            <label for="first-name">配 送 点</label>
                                            <select id="state" class="pure-input-1-2">
                                                <option>AL</option>
                                                <option>CA</option>
                                                <option>IL</option>
                                            </select>
                                        </div>

                                        <div class="pure-u-1 pure-u-md-1-2 p-rel">
                                            <label for="last-name">配送时间</label>
                                            <input id="last-name" class="pure-u-23-24" type="text" /> 
                                            <div className="time-tip"><a>今天</a> <a>明天</a></div>
                                            <span className='zhi'>至</span>
                                            <input id="last-name" class="pure-u-23-24" type="text" />
                                        </div>

                                        <div class="pure-u-1 pure-u-md-1-3">
                                            <label for="first-name">订单类型</label>
                                            <select id="state" class="pure-input-1-2">
                                                <option>AL</option>
                                                <option>CA</option>
                                                <option>IL</option>
                                            </select>
                                        </div>

                                        <div class="pure-u-1 pure-u-md-1-2">
                                            <label for="first-name">收货人</label>
                                            <select id="state" class="pure-input-1-3">
                                                <option>AL</option>
                                                <option>CA</option>
                                                <option>IL</option>
                                            </select>
                                            <span className='zhi'></span>
                                            <input id="last-name" class="pure-u-23-24" type="text" />
                                        </div>
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                        <div className="filter-box-right">
                            <button class="pure-button pure-button-primary button-xlarge">查询</button>
                        </div>
                    </div>


                    <div className="table-info">
                        共 <a onClick={() => {}}>23</a> 条记录， 每页显示 <a onClick={() => {}}>10</a> <a onClick={() => {}}>20</a> <a onClick={() => {}}>30</a> 条记录
                    </div>

                    <table className='pure-table pure-table-bordered'>
                        <thead>
                            <tr>
                                <td>配送点</td>
                                <td>收货人</td>
                                <td>电话</td>
                                <td>忌口备注</td>
                                <td>订单类型</td>
                                <td>配送日期</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><h3>水果配送-优享套餐</h3><p>体验餐次日配送</p></td>
                                <td><div>毛薛磊</div><div>詹晓燕<br />18611090011</div></td>
                                <td>2018-11-11 11:11</td>
                                <td>299元</td>
                                <td>首次包月</td>
                                <td>新浪收发室</td>
                                
                            </tr>
                            <tr>
                                <td><h3>水果配送-优享套餐</h3><p>体验餐次日配送</p></td>
                                <td><div>毛薛磊</div><div>詹晓燕<br />18611090011</div></td>
                                <td>2018-11-11 11:11</td>
                                <td>299元</td>
                                <td>首次包月</td>
                                <td>新浪收发室</td>
                                
                            </tr>
                            <tr>
                                <td><h3>水果配送-优享套餐</h3><p>体验餐次日配送</p></td>
                                <td><div>毛薛磊</div><div>詹晓燕<br />18611090011</div></td>
                                <td>2018-11-11 11:11</td>
                                <td>299元</td>
                                <td>首次包月</td>
                                <td>新浪收发室</td>
                                
                            </tr>
                            <tr>
                                <td><h3>水果配送-优享套餐</h3><p>体验餐次日配送</p></td>
                                <td><div>毛薛磊</div><div>詹晓燕<br />18611090011</div></td>
                                <td>2018-11-11 11:11</td>
                                <td>299元</td>
                                <td>首次包月</td>
                                <td>新浪收发室</td>
                                
                            </tr>
                        </tbody>
                    </table>

                    <div className="pager">
                        <a> 上一页 </a>
                        <a> 1 </a>
                        <a> 2 </a>
                        <a> 3 </a>
                        <a> 4 </a>
                        <a> ... </a>
                        <a> 11 </a>
                        <a> 12 </a>
                        <a> 13 </a>
                        <a> 下一页 </a>
                    </div>










                    
                </div>
            </Sizing>

        )
    }

    // componentDidMount() {
    //     const a = <DateRangePicker
    //       onChange={this.onChange}
    //       value={this.state.date}
    //     />
    // }

    // componentDidMount = async() => {
    // const a = await import ('react-daterange-picker')
    // }
}
